<template>
  <div id="basicInfo">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form">
      <el-form-item label="平台名称" class="input" prop="companyName">
        <el-input v-model="form.companyName" ></el-input>
      </el-form-item>
      <el-form-item label="logo图标" class="input" prop="logoUrl">
        <el-col :span="16">
          <el-input v-model="form.logoUrl"></el-input>
          <upload @success="updateUrl" class="upload"></upload>
        </el-col>
        <el-col :span="8">
          <div class="logoBox">
            <img :src="form.logoUrl" alt="">
          </div>
        </el-col>
      </el-form-item>
      <el-form-item label="平台url" class="input" prop="companyUrl">
        <el-input v-model="form.companyUrl"></el-input>
      </el-form-item>
      <el-form-item label="平台编号" class="input" prop="companyNo">
        <el-col :span="8">
          <el-input v-model="form.companyNo" :readonly="true"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button v-if="form.companyNo === ''" type="primary" icon="el-icon-edit" @click="getCompanyNo()">获取编号</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="平台描述" class="input">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="返利起投" class="input" prop="profitOrigin">
        <el-input v-model="form.profitOrigin" class="investor"></el-input>元
      </el-form-item>
      <el-form-item label="年化收益" class="input" prop="minYearProfit">
        <el-input v-model="form.minYearProfit" class="profit"  ></el-input>
        <span class="spanPercent">%</span>
        <span class="icon">~</span>
        <el-input v-model="form.maxYearProfit" class="profit" ></el-input>
        <span class="spanPercent">%</span>
      </el-form-item>
      <el-form-item label="投资用户" class="input" prop="investmentNum">
        <el-input v-model="form.investmentNum" class="investor"   ></el-input>万人
      </el-form-item>
      <el-form-item label="返利周期" class="input" prop="payBackTerm">
        <el-input v-model="form.payBackTerm" class="investor"  ></el-input>工作日
      </el-form-item>
      <el-form-item label="着陆链接" class="input" prop="jumpUrl">
        <el-input v-model="form.jumpUrl"></el-input>
      </el-form-item>
      <el-form-item label="运营年限" class="input" prop="operateTerm">
        <el-input v-model="form.operateTerm" class="investor"></el-input>年
      </el-form-item>
      <el-form-item label="首投规则" class="input">
        <el-input type="textarea" v-model="form.firstBuyRule"></el-input>
      </el-form-item>
      <el-form-item label="复投规则" class="input">
        <el-input type="textarea" v-model="form.againBuyRule"></el-input>
      </el-form-item>
      <el-form-item label="最高返利金额" class="input" prop="maxProfit" >
        <el-input v-model="form.maxProfit"></el-input>
      </el-form-item>
      <el-form-item label="惠投指数" class="input">
        <!-- <el-input v-model="form.recommendLevel"></el-input> -->
        <el-select v-model="form.recommendLevel" placeholder="请选择惠投指数">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="buttonBox">
      <div class="button" @click="toNext()" v-if="route.name=='addBusiness'">下一步</div>
      <div class="button" @click="save()" v-else>保存</div>
    </div>
  </div>
</template>
<script>
import { companySave, companyDetail } from 'api/business'
import { retailersGetNo } from 'api/retailers'
import { rules } from './config'
import { api } from 'api/common'
import upload from 'components/upload'
export default {
  components: {
    upload
  },
  data() {
    return {
      uploadConfig: {
        url: api.postUploadImg
      },
      limit: 1,
      /*
       *  id              公司Id
       *  companyUrl      公司url
       *  companyName     公司名称
       *  companyNo       公司编号
       *  description     公司描述
       *  firstBuyRule    首投规则
       *  againBuyRule    复投规则
       *  investmentNum   投资人数
       *  jumpUrl         着陆链接
       *  logoUrl         图片链接
       *  level           等级
       *  minYearProfit   最低收益
       *  maxYearProfit   最高收益
       *  operateTerm     运营年限
       *  payBackTerm     返利周期
       *  profitOrigin    返利起投金额
       *  maxProfit       最高返利
       *  recommendLevel  惠投指数
      */
      form: {
        id: sessionStorage.getItem('businessId') || '',
        companyUrl: '',
        companyName: '',
        companyNo: '',
        description: '',
        firstBuyRule: '',
        againBuyRule: '',
        investmentNum: '',
        jumpUrl: '',
        logoUrl: '',
        minYearProfit: '',
        maxYearProfit: '',
        operateTerm: '',
        payBackTerm: '',
        profitOrigin: '',
        saleStatus: 0,
        sequence: 0,
        version: 0,
        approve: 0,
        maxProfit: '',
        recommendLevel: '5'
      },
      dialogImageUrl: '',
      dialogVisible: false,
      options: [
        {
          value: '0',
          label: '0'
        }, {
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '4',
          label: '4'
        }, {
          value: '5',
          label: '5'
        }
      ],
      rules: rules
    }
  },
  computed: {
    route() {
      return this.$route
    }
  },
  created() {
    if (sessionStorage.getItem('businessId')) {
      this.getBusinessInfo()
    }
  },
  methods: {
    async getCompanyNo() {
      if (this.form.companyName != null && this.form.companyName !== '') {
        try {
          let back = await retailersGetNo(this.form.companyName)
          back = back.data
          if (back.resultCode === '200') {
            console.log('companyNo = ' + back.result)
            this.form.companyNo = back.result
          } else {
            this.$alert('出错了：' + back.msg, '提示')
          }
        } catch (err) {
          this.$alert('请求出错', '提示')
        }
      } else {
        this.$alert('产品名称为空，无法获取', '提示')
      }
    },
    updateUrl(parm) {
      this.form.logoUrl = parm
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    setUrl(response, file, fileList) {
      this.form.logoUrl = response.result
    },
    async getBusinessInfo() {
      try {
        let back = await companyDetail(sessionStorage.getItem('businessId'))
        back = back.data
        if (back.resultCode === '200') {
          this.form = { ...back.result }
        } else {
          this.$alert(back.msg)
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    toNext(parm) {
      this.submit('next')
    },
    save() {
      this.submit('save')
    },
    submit(type) {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          var regDecimal2 = /^[0-9]+(.[0-9]{1,2})?$/

          if (this.form.maxYearProfit === '' || regDecimal2.test(this.form.maxYearProfit) === false) {
            this.$alert('最高收益格式错误, 应该为整数或者2位小数', '提示')
            return false
          }

          try {
            let back = await companySave(this.form)
            back = back.data
            if (back.resultCode === '200') {
              if (type === 'save') {
                this.$alert('保存成功', '提示')
              } else if (type === 'next') {
                sessionStorage.setItem('businessId', back.result.id)
                this.$emit('goTo', 'label')
              }
            } else {
              this.$alert('出错了：' + back.msg, '提示')
            }
          } catch (err) {
            this.$alert('请求出错', '提示')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  #basicInfo{
    .form{
      width:100%;
      overflow: hidden;
      margin-top:30px;
      .profit{
        float: left;
        width:100px;
        text-align: center;
      }
    }
    .buttonBox{
      overflow: hidden;

      .button{
        float: left;
        width:200px;
        height:40px;
        line-height: 40px;
        border-radius: 5px;
        margin:40px ;
        color:white;
        background: #409EFF;
        text-align: center;
        cursor: pointer;
      }
    }
    .input{
      float: left;
      width: 45%;
      .investor{
        width:50%;
        margin-right:10px;
      }
      .icon{
        width:30px;
        text-align:center;
        float: left;
      }
      .spanPercent{
        width:16px;
        text-align:left;
        float: left;
      }
    }
  }
  .logoBox{
    width:80px;;
    height:80px;
    margin-left:30px;
    img{
      width:100%;
    }
  }
</style>
